<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3_虚拟DOM与真实DOM</title>
</head>

<body>
    <div id="test"></div>
    <div id="demo"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        const VDOM = (
            <h1 id='title'>
                <span>Hello，React</span>
            </h1>
        );
        ReactDOM.render(VDOM, document.getElementById('test'));
        const TDOM = document.getElementById('demo');
        console.log('虚拟DOM', VDOM);
        console.log('真实DOM', TDOM);
        // debugger
        // console.log(typeof VDOM); // object
        // console.log(VDOM instanceof Object); // true
        /**
         * 关于虚拟DOM（存放在内存中）：
         * 1.本质Object类型的对象（一般对象）
         * 2.虚拟DOM比较轻量，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实的DOM那么多的属性。
         *  （虚拟DOM是React内部在用对象表述这个结构，而真实DOM是浏览器用DOM节点表述这个结构）
         * 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
         */
    </script>
</body>

</html>